<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :modal="model"
    top="5vh"
    :title="state.dialogTitle"
    :width="width"
  >
    <FormDefEdit ref="formDefRef" v-model:formData="formData" v-if="mounted" />
    <template #footer>
      <el-button icon="CircleCloseFilled" type="warning" @click="close">
        取 消
      </el-button>
      <el-button
        icon="DocumentChecked"
        :disabled="state.readonly"
        type="primary"
        @click="save"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup name="FlowFormEdit" lang="ts">
import { useMessage } from "@/hooks/message";
import { cloneObject } from "@/utils/common";
import { addFormBatch, updateFormBatch } from "@/api/flow/form";
import type { FormModel } from "@/views/design/form/FormComponentMixin";
import FormDefEdit from "@/views/design/form/FormDefEdit.vue";

const props = defineProps({
  title: {
    type: String,
    default: "表单"
  },
  width: {
    type: String,
    default: "20%"
  },
  model: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const mounted = ref(false);
const formDefRef = ref(null);
const formData = ref<FormModel>({
  id: "",
  formName: "",
  formRemark: "",
  formStatus: "0",
  formInfo: "",
  formTypeId: "",
  formTypeCode: "",
  formTypeName: "",
  storageType: "0"
});

const state = reactive({
  readonly: false,
  operationAdd: false,
  dialogVisible: false,
  dialogTitle: `${props.title}详情`
});

const show = (row, readonly) => {
  if (readonly) {
    state.readonly = readonly;
    state.dialogTitle = `${props.title}详情`;
  } else {
    state.readonly = false;
  }
  if (row && row.id) {
    state.dialogTitle = `修改${props.title}`;
    cloneObject(formData.value, row);
  } else {
    state.operationAdd = true;
    state.dialogTitle = `新增${props.title}`;
  }
  mounted.value = true;
  state.dialogVisible = true;
};

const close = () => {
  state.readonly = false;
  state.operationAdd = false;
  state.dialogTitle = props.title;
  formData.value = {
    id: "",
    formName: "",
    formRemark: "",
    formStatus: "0",
    formInfo: "",
    formTypeId: "",
    formTypeCode: "",
    formTypeName: "",
    storageType: "0"
  };
  state.dialogVisible = false;
};

const save = () => {
  formDefRef.value.validate().then(valid => {
    if (valid) {
      if (state.operationAdd) {
        addFormBatch(formData.value).then(res => {
          if (res.code === 200) {
            useMessage().success("保存成功");
            emits("confirm", {});
            close();
          } else {
            useMessage().warning(res.msg);
          }
        });
      } else {
        updateFormBatch(formData.value).then(res => {
          if (res.code === 200) {
            useMessage().success("保存成功");
            emits("confirm", {});
            close();
          } else {
            useMessage().warning(res.msg);
          }
        });
      }
    }
  });
};

defineExpose({
  show,
  close,
  save
});
</script>

<style lang="scss" scoped>
.form-table {
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
</style>
